<script>
			var module_inits = [];
			
			function load_init_modules() {
				for (var i = 0; i < module_inits.length; i++) {
					module_inits[i]();
				}
			}
			
			function call_me(fun) {
				module_inits.push(fun);
			}
			onload = load_init_modules;
		</script>

		<script>
			var slider_images_url = [
			{volist name='pics' id='vo'}
			'{$vo.url}',
			{/volist}
			];
			var e_desc = '{$title}';
		</script>
<style type="text/css">
    
*
{
    padding: 0px;
    margin: 0px;
    -webkit-box-sizing: border-box;
}

body
{
    background-color: black;
}

#container
{
    width: 500px;
    height: 815px;
    position: absolute;
    overflow: hidden;
}
#container > div,#container >img
{
    position: absolute;
}
#fengchediv
{
    left: 28px;
    top: 296px;
    width: 239px;
    height: 239px;
    -webkit-transform: perspective(600px) rotateY(30deg);
    -webkit-transform-origin: 0% 50%;
}
#fengche
{
    -webkit-animation: rotateing 5s linear infinite;
}
#zhalan
{
    left: 0px;
    top: 727px;
}
#shang
{
    left: -18px;
    top: -20px;
}
#dian1
{
    width: 60px;
    position: absolute;
    -webkit-animation: zidian1 6s linear infinite;
}
#diandiv1
{
    width: 60px;
    left: 34px;
    top: 254px;
    -webkit-animation: diandiv1 6s linear infinite;
}
#dian2
{
    width: 40px;
    position: absolute;
    -webkit-animation: zidian1 5s 2s linear infinite;
    
}
#diandiv2
{
    width: 40px;
    height: 40px;
    left: 223px;
    top: 370px;
    -webkit-animation: diandiv2 5s 2s linear infinite;
    opacity: 0;
}
#dian3
{
    width: 20px;
    position: absolute;
    -webkit-animation: zidian3 4s linear infinite;
}
#diandiv3
{
    width: 20px;
    height: 20px;
    left: 444px;
    top: 370px;
    -webkit-animation: diandiv3 4s linear infinite;
}
#dian4
{
    width: 20px;
    position: absolute;
    -webkit-animaiton: zidian3 4s linear infinite;
}
#diandiv4
{
    width: 20px;
    height: 20px;
    left: 442px;
    top: 585px;
    -webkit-animation: diandiv3 4s linear infinite;
}
#diandiv5
{
    width: 60px;
    top: 60px;
    left: 38px;
    top: 511px;
    opacity: 0;
    -webkit-animation: diandiv1 6s 4s linear infinite;
}
#dian5
{
    width: 60px;
    position: absolute;
    -webkit-animation: zidian1 6s 4s linear infinite;
}
#diandiv6
{
    width: 50px;
    height: 50px;
    left: 32px;
    top: 703px;
    opacity: 0;
    -webkit-animation: diandiv1 5s 3s linear infinite;
}
#dian6
{
    position: absolute;
    width: 50px;
    -webkit-animation: zidian1 5s 3s linear infinite;
}
#diandiv7
{
    width: 40px;
    height: 40px;
    left: 159px;
    top: 544px;
    opacity: 0;
    -webkit-animation: diandiv1 6s 2s linear infinite;
}
#dian7
{
    width: 40px;
    position: absolute;
    -webkit-animation: zidian1 6s 2s linear infinite;
}
#diandiv8
{
    left: 303px;
    top: 452px;
    width: 40px;
    opacity: 0;
    -webkit-animation: diandiv1 5s linear infinite;
}
#dian8
{
    width: 30px;
    position: absolute;
    -webkit-animation: zidian1 5s linear infinite;
}
#diandiv9
{
    left: 293px;
    top: 606px;
    width: 30px;
    opacity: 0;
    -webkit-animation: diandiv1 6s 2s linear infinite;
}
#dian9
{
    width: 30px;
    position: absolute;
    -webkit-animation: zidian1 6s 2s linear infinite;
}
.hudie
{
    position: absolute;
    width: 90px;
    height: 88px;
}
.hudie > img
{
    position: absolute;
}
.chibang1
{
    -webkit-transform-origin: 100% 50%;
    -webkit-animation: chibang1 0.3s linear infinite alternate;
    /*-webkit-animation: chibang 1s linear infinite alternate;*/
}
.chibang2
{
    -webkit-transform-origin:100% 50%;
    -webkit-transform: scale(-1,1);
    -webkit-animation: chibang2 0.3s linear infinite alternate;
    /*-webkit-animation: chibang 1s linear infinite alternate;*/
}
.chibang3
{
    -webkit-transform-origin: 100% 50%;
    left: 21px;
    top: 42px;
    -webkit-animation: chibang3 0.3s linear infinite alternate;
}
.chibang4
{
    -webkit-transform-origin: 100% 50%;
    -webkit-transform: scale(-1,1);
    left: 16px;
    top: 41px;
    -webkit-animation: chibang4 0.3s linear infinite alternate;
}
#hudie1
{
    left: 184px;
    width: 10px;
    height: 10px;
    /*background-color: #fff;*/
    top: 669px;
    -webkit-animation: hudie1 6s linear infinite;
}
#hudiein1
{
    position: absolute;
    -webkit-transform-origin: 0% 50%;
    -webkit-transform: rotate(90deg) scale(.15);
    left: 0px;
    top: -44px;
}
#hudie2
{
    position: absolute;
    left: 284px;
    top: 672px;
    width: 10px;
    height: 10px;
    /*background-color: #fff;*/
    -webkit-animation: hudie2 6s linear infinite;
}
#hudiein2
{
    position: absolute;
    left: -40px;
    top: -40px;
    -webkit-transform: scale(0.1);
    /*-webkit-animation: hudiein2 6s linear infinite;*/
}
#hudieout2
{
    -webkit-animation: hudieout2 6s linear infinite;
}
#hudie3
{
    left: 155px;
    top: 565px;
    -webkit-transform: rotate(60deg) scale(0.12);
    -webkit-animation: hudie3 6s linear infinite;
}
.cloud
{
    left: 500px;
    top: -80px;
    -webkit-animation: cloudmoving 60s linear infinite;
}
.cloud1
{
    left: 0px;
    top: -60px;
    -webkit-animation: cloudmoving1 45s linear infinite;
}
.divv
{
    left: 155px;
    top: 149px;
    width: 352px;
    height: 455px;
    background-image: url(__DIR__{$dir}/img/dizi02.png);
    -webkit-transform: translate(600px,0px);
    /*-webkit-animation: divv_out_right 6s linear both;*/
    /*-webkit-animation: divv_out_left 6s linear both;*/
}
.divh
{
    width: 518px;
    height: 395px;
    background-image: url(__DIR__{$dir}/img/dizi01.png);
    left:-5px;
    top: 150px;
    /*opacity: 0;*/
    -webkit-transform: translate(600px,0px);
    /*-webkit-animation: divh_out_up 6s linear both;*/
}
.imgconv
{
    left: 20px;
    top: 15px;
    width: 313px;
    height: 421px;
    background-color: #fff;
    position: absolute;
    /*-webkit-animation: divv_mid_right 6s linear both;*/
    /*-webkit-animation: divv_mid_left 6s linear both;*/
}
.imgconh
{
    left: 0px;
    top: 24px;
    width: 510px;
    height: 350px;
    background-color: #fff;
    position: absolute;
    /*-webkit-animation: divh_mid_up 6s linear both;*/
}
.conv
{
    position: absolute;
    left: 10px;
    top: 10px;
    width: 280px;
    height: 400px;
    background-color: #666;
    /*-webkit-animation: divv_in_right 6s linear both;*/
    -webkit-animation: divv_in_left 6s linear both;
    overflow: hidden;
}
.conh
{
    position: absolute;
    left: 8px;
    top: 8px;
    width: 495px;
    height: 335px;
    background-color: #666;
    /*-webkit-animation: divh_in_up 6s linear both;*/
    overflow: hidden;
}
</style>
<style type="text/css">
@-webkit-keyframes rotateing 
{
    from  {-webkit-transform: rotate(0deg);}
    to    {-webkit-transform: rotate(360deg);}
}
@-webkit-keyframes diandiv1
{
    0%  {-webkit-transform: translate(0px,0px);opacity: 0}
    18% {-webkit-transform: translate(0px,-36px);opacity: 0.7}
    55% {-webkit-transform: translate(0px,-115px);opacity: 0.7}
    70% {-webkit-transform: translate(0px,-150px);opacity: 0}
    100%{-webkit-transform: translate(0px,-150px);opacity: 0}
}
@-webkit-keyframes diandiv2
{
    0%  {-webkit-transform: translate(0px,0px);opacity: 0}
    18% {-webkit-transform: translate(0px,-54px);opacity: 0.7}
    55% {-webkit-transform: translate(0px,-180px);opacity: 0.7}
    70% {-webkit-transform: translate(0px,-225px);opacity: 0}
    100%{-webkit-transform: translate(0px,-225px);opacity: 0}
}
@-webkit-keyframes zidian1
{
    0%  {-webkit-transform: translate(0px,0px);-webkit-animation-timing-function:ease-out;}
    18% {-webkit-transform: translate(-10px,0px);-webkit-animation-timing-function: ease-in-out;}
    55% {-webkit-transform: translate(10px,0px);-webkit-animation-timing-function: ease-in-out;}
    70% {-webkit-transform: translate(0px,0px);-webkit-animation-timing-function: ease-in-out;}
    100%{-webkit-transform: translate(0px,0px);-webkit-animation-timing-function: ease-out;}
}
@-webkit-keyframes diandiv3
{
    0%  {-webkit-transform: translate(0px,0px);opacity: 0}
    18% {-webkit-transform: translate(0px,-18px);opacity: 0.7}
    55% {-webkit-transform: translate(0px,-55px);opacity: 0.7}
    70% {-webkit-transform: translate(0px,-70px);opacity: 0}
    100%{-webkit-transform: translate(0px,-70px);opacity: 0}
}
@-webkit-keyframes zidian1
{
    0%  {-webkit-transform: translate(0px,0px);-webkit-animation-timing-function:ease-out;}
    18% {-webkit-transform: translate(-8px,0px);-webkit-animation-timing-function: ease-in-out;}
    55% {-webkit-transform: translate(8px,0px);-webkit-animation-timing-function: ease-in-out;}
    70% {-webkit-transform: translate(0px,0px);-webkit-animation-timing-function: ease-in-out;}
    100%{-webkit-transform: translate(0px,0px);-webkit-animation-timing-function: ease-out;}
}
@-webkit-keyframes chibang1
{
    0%  {-webkit-transform: scale(1,1);}
/*    50% {-webkit-transform: scale(1,1);}
    60% {-webkit-transform: scale(0,1);}*/
    100%{-webkit-transform: scale(0,1);}
}
@-webkit-keyframes chibang2
{
    0%  {-webkit-transform: scale(-1,1);}
/*    50% {-webkit-transform: scale(-1,1);}
    60% {-webkit-transform: scale(-0,1);}*/
    100%{-webkit-transform: scale(-0,1);}
}
@-webkit-keyframes chibang3
{
    0%  {-webkit-transform: scale(1,1);}
/*    40% {-webkit-transform: scale(1,1);}
    60% {-webkit-transform: scale(0,1);}
    80% {-webkit-transform: scale(0,1);}*/
    100%{-webkit-transform: scale(0.5,1);}
}
@-webkit-keyframes chibang4
{
    0%  {-webkit-transform: scale(-1,1);}
/*    40% {-webkit-transform: scale(-1,1);}
    60% {-webkit-transform: scale(0,1);}
    80% {-webkit-transform: scale(0,1);}*/
    100%{-webkit-transform: scale(-0.5,1);}
}
@-webkit-keyframes hudie1
{
    0%  {-webkit-transform: translate(0px,0px) rotate(0deg) scale(1);opacity: 0}
    15% {-webkit-transform: translate(28px,-10px) rotate(-12deg) scale(1);opacity: 1}
    50% {-webkit-transform: translate(108px,-35px) rotate(-30deg) scale(.8);opacity: 1}
    85% {-webkit-transform: translate(195px,-80px) rotate(-58deg) scale(.7);opacity: 1}
    100%{-webkit-transform: translate(216px,-98px) rotate(-60deg) scale(.6);opacity: 0}
}
@-webkit-keyframes hudie2
{
    0%  {-webkit-transform: translate(0px,0px) rotate(0deg) scale(2);opacity: 0;}
    9% {-webkit-transform: translate(-10px,-26px) rotate(-90deg) scale(2);opacity: 1;-webkit-animation-timing-function:cubic-bezier(.08,.46,.87,.51);}
    11% {-webkit-transform: translate(-10px,-26px) rotate(-90deg) scale(2);opacity: 1;}
    20% {-webkit-transform: translate(-20px,-10px) rotate(-150deg) scale(2);opacity: 0}
    30% {-webkit-transform: translate(-20px,-5px) rotate(0deg) scale(2);opacity: 0;}
    41% {-webkit-transform: translate(-30px,-30px) rotate(-90deg) scale(2);opacity: 1;-webkit-animation-timing-function:cubic-bezier(.08,.46,.87,.51);}
    43% {-webkit-transform: translate(-30px,-30px) rotate(-90deg) scale(2);opacity: 1;}
    54% {-webkit-transform: translate(-40px,-15px) rotate(-150deg) scale(2);opacity: 0}
    66% {-webkit-transform: translate(-40px,-10px) rotate(0deg) scale(2);opacity: 0;}
    76% {-webkit-transform: translate(-50px,-35px) rotate(-90deg) scale(2);opacity: 1;-webkit-animation-timing-function:cubic-bezier(.08,.46,.87,.51);}
    78% {-webkit-transform: translate(-50px,-35px) rotate(-90deg) scale(2);opacity: 1;}
    88% {-webkit-transform: translate(-60px,-10px) rotate(-150deg) scale(2);opacity: 0}
    100%{-webkit-transform: translate(-60px,0px);opacity: 0}
}
@-webkit-keyframes hudieout2 
{
    from  {-webkit-transform: translate(0px,0px) scale(1)}
    to    {-webkit-transform: translate(-150px,0px) scale(1)}
}
@-webkit-keyframes hudie3
{
    0%   {opacity: 0;}
    30%  {opacity: 0;-webkit-transform: rotate(60deg) scale(0.12);}
    35%  {opacity: 1;-webkit-transform: rotate(60deg) scale(0.12);}
    65%  {opacity: 1;-webkit-transform: translate(60px,-20px) rotate(90deg) scale(0.12);}
    95%  {opacity: 1;-webkit-transform: translate(120px,0px) rotate(120deg) scale(0.12);}
    100% {opacity: 0;-webkit-transform: translate(120px,0px) rotate(120deg) scale(0.12);}
}
@-webkit-keyframes cloudmoving
{
    from  {-webkit-transform: translate(0px,0px);}
    to    {-webkit-transform: translate(-1500px,0px);}
}
@-webkit-keyframes cloudmoving1
{
    0%    {-webkit-transform: translate(0px,0px);}
    69%   {-webkit-transform: translate(-1000px,0px);opacity: 1}
    70%   {-webkit-transform: translate(-1000px,0px);opacity: 0}
    71%   {-webkit-transform: translate(500px,0px);opacity: 0}
    72%   {-webkit-transform: translate(500px,0px);opacity: 1}
    100%  {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes title_in
{
    from  {opacity: 0;-webkit-transform: translate(0px,100px);}
    to    {opacity: 1;-webkit-transform: translate(0px,0px);}
}
@-webkit-keyframes title_out
{
    from  {opacity: 1;-webkit-transform: translate(0px,0px);}
    to    {opacity: 0;-webkit-transform: translate(0px,-100px);}
}
@-webkit-keyframes divv_out_right
{
    0%    {-webkit-transform: translate(345px,0px);-webkit-animation-timing-function: ease-out;}
    17.2% {-webkit-transform: translate(0px,0px);}
    20.6% {-webkit-transform: translate(10px,0px);}
    79.3% {-webkit-transform: translate(10px,0px);}
    82.7% {-webkit-transform: translate(0px,0px);-webkit-animation-timing-function: ease-in;}
    100%  {-webkit-transform: translate(345px,0px);}
}
@-webkit-keyframes divv_out_left
{
    0%    {-webkit-transform: translate(-503px,-56px);-webkit-animation-timing-function: ease-out;}
    17.2% {-webkit-transform: translate(-158px,-56px);}
    20.6% {-webkit-transform: translate(-168px,-56px);}
    79.3% {-webkit-transform: translate(-168px,-56px);}
    82.7% {-webkit-transform: translate(-158px,-56px);-webkit-animation-timing-function: ease-in;}
    100%  {-webkit-transform: translate(-503px,-56px);}

}
@-webkit-keyframes divv_mid_right
{
    0%    {-webkit-transform: translate(100px,0px);-webkit-animation-timing-function: ease-out}
    17.2% {-webkit-transform: translate(-13px,0px);-webkit-animation-timing-function: ease-out}
    20.6% {-webkit-transform: translate(0px,0px);}
    79.3% {-webkit-transform: translate(0px,0px);}
    82.7% {-webkit-transform: translate(-13px,0px);-webkit-animation-timing-function: ease-in;}
    100%  {-webkit-transform: translate(100px,0px);}
}
@-webkit-keyframes divv_mid_left
{
    0%    {-webkit-transform: translate(-100px,0px);-webkit-animation-timing-function: ease-out}
    17.2% {-webkit-transform: translate(13px,0px);-webkit-animation-timing-function: ease-out}
    20.6% {-webkit-transform: translate(0px,0px);}
    79.3% {-webkit-transform: translate(0px,0px);}
    82.7% {-webkit-transform: translate(13px,0px);-webkit-animation-timing-function: ease-in;}
    100%  {-webkit-transform: translate(-100px,0px);}
}
@-webkit-keyframes divv_in_right
{
    0%    {opacity: 0}
    7%    {-webkit-transform: translate(32px,0px);opacity: 0}
    15.5% {-webkit-transform: translate(-3px,0px);opacity: 0.7}
    25.6% {-webkit-transform: translate(20px,0px);opacity: 1}
    37.5% {-webkit-transform: translate(-3px,0px);opacity: 1}
    55%   {-webkit-transform: translate(5px,0px);opacity: 1}
    74%   {-webkit-transform: translate(-3px,0px);opacity: 1}
    100%  {-webkit-transform: translate(40px,0px);opacity: 1}
}
@-webkit-keyframes divv_in_left
{
    0%    {opacity: 0}
    7%    {-webkit-transform: translate(-22px,0px);opacity: 0}
    15.5% {-webkit-transform: translate(13px,0px);opacity: 0.7}
    25.6% {-webkit-transform: translate(5px,0px);opacity: 1}
    37.5% {-webkit-transform: translate(15px,0px);opacity: 1}
    74%   {-webkit-transform: translate(0px,0px);opacity: 1}
    83%   {-webkit-transform: translate(15px,0px);opacity: 1}
    100%  {-webkit-transform: translate(-30px,0px);opacity: 1}
}

@-webkit-keyframes divh_out_right
{
    0%    {-webkit-transform: translate(500px,0px);-webkit-animation-timing-function: ease-out;}
    17.2% {-webkit-transform: translate(0px,0px);}
/*    20.6% {-webkit-transform: translate(15px,0px);}
    79.3% {-webkit-transform: translate(15px,0px);}*/
    82.7% {-webkit-transform: translate(0px,0px);-webkit-animation-timing-function: ease-in;}
    100%  {-webkit-transform: translate(500px,0px);}
}
@-webkit-keyframes divh_mid_right
{
    0%    {-webkit-transform: translate(100px,0px);-webkit-animation-timing-function: ease-out}
    17.2% {-webkit-transform: translate(5px,0px);-webkit-animation-timing-function: ease-out}
    20.6% {-webkit-transform: translate(0px,0px);}
    79.3% {-webkit-transform: translate(0px,0px);}
    82.7% {-webkit-transform: translate(5px,0px);-webkit-animation-timing-function: ease-in;}
    100%  {-webkit-transform: translate(100px,0px);}
}
@-webkit-keyframes divh_in_right
{
    0%    {opacity: 0}
    7%    {-webkit-transform: translate(32px,0px);opacity: 0}
    15.5% {-webkit-transform: translate(-3px,0px);opacity: 0.7}
    25.6% {-webkit-transform: translate(3px,0px);opacity: 1}
    37.5% {-webkit-transform: translate(-3px,0px);opacity: 1}
    55%   {-webkit-transform: translate(3px,0px);opacity: 1}
    74%   {-webkit-transform: translate(-5px,0px);opacity: 1}
    100%  {-webkit-transform: translate(40px,0px);opacity: 1}
}
@-webkit-keyframes divh_out_left
{
    0%    {-webkit-transform: translate(-500px,0px);-webkit-animation-timing-function: ease-out;}
    17.2% {-webkit-transform: translate(0px,0px);}
/*    20.6% {-webkit-transform: translate(15px,0px);}
    79.3% {-webkit-transform: translate(15px,0px);}*/
    82.7% {-webkit-transform: translate(0px,0px);-webkit-animation-timing-function: ease-in;}
    100%  {-webkit-transform: translate(-500px,0px);}
}
@-webkit-keyframes divh_mid_left
{
    0%    {-webkit-transform: translate(-100px,0px);-webkit-animation-timing-function: ease-out}
    17.2% {-webkit-transform: translate(-5px,0px);-webkit-animation-timing-function: ease-out}
    20.6% {-webkit-transform: translate(0px,0px);}
    79.3% {-webkit-transform: translate(0px,0px);}
    82.7% {-webkit-transform: translate(-5px,0px);-webkit-animation-timing-function: ease-in;}
    100%  {-webkit-transform: translate(-100px,0px);}
}
@-webkit-keyframes divh_in_left
{
    0%    {opacity: 0}
    7%    {-webkit-transform: translate(-32px,0px);opacity: 0}
    15.5% {-webkit-transform: translate(3px,0px);opacity: 0.7}
    25.6% {-webkit-transform: translate(-3px,0px);opacity: 1}
    37.5% {-webkit-transform: translate(3px,0px);opacity: 1}
    55%   {-webkit-transform: translate(-3px,0px);opacity: 1}
    79%   {-webkit-transform: translate(0px,0px);opacity: 1}
    83%   {-webkit-transform: translate(10px,0px);opacity: 1}
    100%  {-webkit-transform: translate(-40px,0px);opacity: 1}
}

@-webkit-keyframes divh_out_up
{
    0%    {-webkit-transform: translate(0px,-500px);-webkit-animation-timing-function: ease-out;}
    17.2% {-webkit-transform: translate(0px,0px);}
/*    20.6% {-webkit-transform: translate(15px,0px);}
    79.3% {-webkit-transform: translate(15px,0px);}*/
    82.7% {-webkit-transform: translate(0px,0px);-webkit-animation-timing-function: ease-in;}
    100%  {-webkit-transform: translate(500px,0px);}
}
@-webkit-keyframes divh_mid_up
{
    0%    {-webkit-transform: translate(0px,-100px);-webkit-animation-timing-function: ease-out}
    17.2% {-webkit-transform: translate(0px,10px);-webkit-animation-timing-function: ease-out}
    20.6% {-webkit-transform: translate(0px,0px);}
    77.3% {-webkit-transform: translate(0px,0px);}
    80.7% {-webkit-transform: translate(5px,0px);-webkit-animation-timing-function: ease-in;}
    100%  {-webkit-transform: translate(100px,0px);}
}
@-webkit-keyframes divh_in_up
{
    0%    {opacity: 0}
    7%    {-webkit-transform: translate(0px,-32px);opacity: 0}
    15.5% {-webkit-transform: translate(0px,3px);opacity: 0.7}
    25.6% {-webkit-transform: translate(0px,-3px);opacity: 1}
    37.5% {-webkit-transform: translate(0px,3px);opacity: 1}
    55%   {-webkit-transform: translate(0px,-3px);opacity: 1}
    74%   {-webkit-transform: translate(0px,0px);opacity: 1}
    78%   {-webkit-transform: translate(-10px,0px);opacity: 1}
    100%  {-webkit-transform: translate(40px,0px);opacity: 1}
}
</style>

<div id='container'>
    <img src='__DIR__{$dir}/img/bg.jpg'>

    <div id='fengchediv'>
        <img id='fengche' src='__DIR__{$dir}/img/chib.png'>
    </div>

    <img class='cloud' src='__DIR__{$dir}/img/yun.png'>
    <img class='cloud1' src='__DIR__{$dir}/img/yun.png'>

    <div id='diandiv1'>    
        <img id='dian1' src='__DIR__{$dir}/img/zidian.png'>
    </div>

    <div id='diandiv2'>    
        <img id='dian2' src='__DIR__{$dir}/img/zidian.png'>
    </div>

    <div id='diandiv3'>    
        <img id='dian3' src='__DIR__{$dir}/img/zidian.png'>
    </div>

    <div id='diandiv4'>    
        <img id='dian4' src='__DIR__{$dir}/img/zidian.png'>
    </div>

    <div id='diandiv5'>    
        <img id='dian5' src='__DIR__{$dir}/img/zidian.png'>
    </div>

    <div id='diandiv6'>    
        <img id='dian6' src='__DIR__{$dir}/img/zidian.png'>
    </div>

    <div id='diandiv7'>    
        <img id='dian7' src='__DIR__{$dir}/img/zidian.png'>
    </div>

    <div id='diandiv8'>    
        <img id='dian8' src='__DIR__{$dir}/img/zidian.png'>
    </div>

    <div id='diandiv9'>    
        <img id='dian9' src='__DIR__{$dir}/img/zidian.png'>
    </div>
    

    <div id='hudie1'>
        <div class='hudie' id='hudiein1'>
            <img class='chibang1' src='__DIR__{$dir}/img/chibang.png'>
            <img class='chibang2' src='__DIR__{$dir}/img/chibang.png'>
            <img class='chibang3' src='__DIR__{$dir}/img/chibang2.png'>
            <img class='chibang4' src='__DIR__{$dir}/img/chibang2.png'>
        </div>
    </div>

    <div id='hudieout2'>
        <div id='hudie2'>
            <div class='hudie' id='hudiein2'>
                <img class='chibang1' src='__DIR__{$dir}/img/chibang.png'>
                <img class='chibang2' src='__DIR__{$dir}/img/chibang.png'>
                <img class='chibang3' src='__DIR__{$dir}/img/chibang2.png'>
                <img class='chibang4' src='__DIR__{$dir}/img/chibang2.png'>
            </div>
        </div>
    </div>

    <div class='hudie' id='hudie3'>
        <img class='chibang1' src='__DIR__{$dir}/img/chibang.png'>
        <img class='chibang2' src='__DIR__{$dir}/img/chibang.png'>
        <img class='chibang3' src='__DIR__{$dir}/img/chibang2.png'>
        <img class='chibang4' src='__DIR__{$dir}/img/chibang2.png'>
    </div>

    <div id='pagetitle' style='position:absolute;width:349px;height:454px;top:150px;left:75px;opacity:0;'>
        <img src='__DIR__{$dir}/img/biaoti1.png'>
        <div style='position:absolute;width:256px;height:279px;top:65px;left:48px;overflow:hidden;display:table'>
            <!-- <div style='position:absolute;width:410px;height:200px;display:table;overflow:hidden;'> -->
                <div id='titlecontent' style='width:256px;height:279px;vertical-align:middle;display:table-cell;text-align:center;font-size:30px;line-height:60px;color:#50546B;'>{$title}</div>
            <!-- </div> -->
        </div>
    </div>

    
    <div id='divv' class='divv'>
        <div id='boxv' class='imgconv'>
            <div id='conv' class='conv'>
                <img id='imgv' style='position:absolute'>
            </div>
        </div>
    </div>

    <div id='divh' class='divh'>
        <div id='boxh' class='imgconh'>
            <div id='conh' class='conh'>
                <img id='imgh' style='position:absolute'>
            </div>
        </div>
    </div>

    <img id='shang' src='__DIR__{$dir}/img/shang.png'>
    <img id='zhalan' src='__DIR__{$dir}/img/zhalan.png'>
</div>



<script>
var image_size_width=[];
var image_size_height=[];
var image_url_index=0;
var have_num = 0;
var error_num = 0;
var canshow = true;
var reshow = false;
var delaytime=4000;
var timeout0;
var timeout1;
var timeout2;
var timeout3;


// 本模板为深圳量子云科技有限公司版权所有 抄袭必究
function id (name) 
{
    return document.getElementById(name);
}

//每次执行加载后10张图片
var bl_keepload = 'first';
var step_loadnum = 5;
function step_load()
{
    var load_num = 0
    //初步加载X张
    if(image_url_index  == 0 && bl_keepload == 'first')
    {
        console.log('loading continue');
        if(slider_images_url.length > step_loadnum)
        {
            load_num = step_loadnum;
            bl_keepload = 'next';
        }
        else
        {
            load_num = slider_images_url.length;
            bl_keepload = 'end';
        }
        for(var i = 0; i< load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }
    else if(bl_keepload == 'end')
    {
        return;
    }
    else
    {
         console.log('loading continue');
        if(slider_images_url.length - image_url_index >step_loadnum*2)
        { 
            load_num = step_loadnum;
        }
        else
        {
            load_num = slider_images_url.length - image_url_index - step_loadnum;
            bl_keepload = 'end';
        }
        for(var i = image_url_index +step_loadnum; i< image_url_index + step_loadnum + load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }

}

function showtitle () 
{
    id('pagetitle').style.webkitAnimation = 'title_in 2s ease-out both';
    id('titlecontent').innerHTML = e_desc;  

    // setTimeout(liangziyun_kawa,4000)
}

function liangziyun_kawa () 
{
    id('pagetitle').style.webkitAnimation = 'title_out 1s ease-in both';

    timeout1 = setTimeout(show1,1000);
}

var arr_ani = ['right','left','up'];
var ani_index = 0;
function show1()
{
    id('divh').style.webkitAnimation = 'divh_out_'+arr_ani[ani_index%3]+' 6s linear both';
    id('conh').style.webkitAnimation = 'divh_in_'+arr_ani[ani_index%3]+' 6s linear both';
    id('boxh').style.webkitAnimation = 'divh_mid_'+arr_ani[ani_index%3]+' 6s linear both';
    setImage();
    id('divv').style.webkitAnimation = 'divv_out_right 6s linear both';
    id('conv').style.webkitAnimation = 'divv_in_right 6s linear both';
    id('boxv').style.webkitAnimation = 'divv_mid_right 6s linear both';

    ani_index ++;
    if(ani_index == 3)
        ani_index = 0;
    // alert();

    timeout2 = setTimeout(show2,6500);
}
function show2()
{
    id('divh').style.webkitAnimation = 'divh_out_'+arr_ani[ani_index%3]+' 6s linear both';
    id('conh').style.webkitAnimation = 'divh_in_'+arr_ani[ani_index%3]+' 6s linear both';
    id('boxh').style.webkitAnimation = 'divh_mid_'+arr_ani[ani_index%3]+' 6s linear both';
    setImage();
    id('divv').style.webkitAnimation = 'divv_out_left 6s linear both';
    id('conv').style.webkitAnimation = 'divv_in_left 6s linear both';
    id('boxv').style.webkitAnimation = 'divv_mid_left 6s linear both';

    ani_index ++;
    if(ani_index == 3)
        ani_index = 0;

    timeout3 = setTimeout(show1, 6500)
}
function setImage()
{
    if(reshow == true)
        return;

    // console.log(image_url_index)
    while(Onload_imgs_url[image_url_index] == 'not find' || Onload_imgs_url[image_url_index] == 'loading')
    {
        // console.log(Onload_imgs_url[image_url_index]);
        if(image_url_index % step_loadnum == 0)
        {
            // alert()
            step_load();
        }
        image_url_index++;
        if(image_url_index == Onload_imgs_url.length)
            image_url_index = 0;
    }

    var img_bili = image_size_width[image_url_index]/image_size_height[image_url_index];


    if(image_url_index % step_loadnum == 0)
    {
        // alert()
        step_load();
    }
    var div;
    var div1;
    var img;

    if(img_bili > 1)
    {
        div = id('divh');
        div1 = id('divv');
        width = 495;
        height = 335;
        img = id('imgh');
    }
    else
    {
        div = id('divv');
        div1 = id('divh');
        width = 280;
        height = 400;
        img = id('imgv')
    }

    div.style.display = 'block';
    div1.style.display = 'none';

    img.src = Onload_imgs_url[image_url_index];
    console.log('setimg:'+img.src);

    if(img_bili > (width/height))
    {
        img.style.top = '0px';
        img.style.height = height + 'px';
        img.style.width = height*img_bili + 'px';
        img.style.left = -((height*img_bili-width)/2)+'px';
    }
    else
    {
        img.style.left = '0px';
        img.style.width = width+'px';
        img.style.height = width/img_bili + 'px';
        img.style.top = -((width/img_bili-height)/2) + 'px';
    }

    image_url_index++;
    if(image_url_index==Onload_imgs_url.length)
        image_url_index = 0;


}
call_me(load_images);
// function loading_first () 
// {   
//     if(slider_images_url.length > 10)
//     {
//         var load_num = 10;
//     }
//     else
//     {
//         var load_num = slider_images_url.length;
//     }

//     for(var i=0;i<load_num;i++)
//     {
//         var img=new Image();
//         img.index=i;
//         img.src=slider_images_url[i];
//         img.onload=image_onload;
//         img.onerror= image_onerror;
//         Onload_imgs_url[i] = 'loading';
//     } 
// }

// function loading_others () 
// {
//     if(slider_images_url.length > 10)
//     {     
//         for(var i=10;i<slider_images_url.length;i++)
//         {
//             var img=new Image();
//             img.index=i;
//             img.src=slider_images_url[i];
//             img.onload=image_onload;
//             img.onerror= image_onerror;
//             Onload_imgs_url[i] = 'loading';
//         } 
//     }
// }
function load_images()
{
    reshow = false;
    image_size_width=[];
    image_size_height=[];
    Onload_imgs_url=[];
    image_url_index=0;
    have_num = 0;
    error_num = 0;
    begin_titletime = new Date();
    begin_titletime = begin_titletime.getTime();
    canshow = true;
    showtitle();
    bl_keepload = 'first';
    // loading_first(); 
    step_load();     
}

function image_onerror(event)
{
    var img = event.target;
    var index = img.index;
    if(index<step_loadnum)
        error_num ++;
    Onload_imgs_url[index] = 'not find';
    // console.log(Onload_imgs_url[index]);
    // console.log(have_num + '-' + error_num);
    if((have_num+error_num >= step_loadnum || slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        // loading_others();
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            liangziyun_kawa();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout0 = setTimeout(function()
                {
                    liangziyun_kawa();
                },dis_titletime);
        }
    }
}

function image_onload(event)
{
    if(reshow == true)
        return;

    var img = event.target;
    var index = img.index;

    if(index<step_loadnum)
    {
        have_num++;
    }
    Onload_imgs_url[index] = img.src;
    image_size_height[index] = img.height;
    image_size_width[index] = img.width;

    console.log(Onload_imgs_url[index]);
    // console.log(have_num + '-' + error_num);

    if((have_num + error_num >= step_loadnum ||slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        // loading_others();
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            liangziyun_kawa();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout0 = setTimeout(function()
                {
                    liangziyun_kawa();
                },dis_titletime);
        }

    }
}
function reload_scene()
{
    clearnode();
    reshow = true;
    setTimeout(load_images,100);
}

function clearnode()
{
    id('divv').style.webkitAnimation = '';
    id('divh').style.webkitAnimation = '';
    id('divv').style.display = 'none';
    id('divh').style.display = 'none';
    id('conv').style.webkitAnimation = '';
    id('conh').style.webkitAnimation = '';
    id('boxv').style.webkitAnimation = '';
    id('boxh').style.webkitAnimation = '';
    id('pagetitle').style.webkitAnimation = '';
    clearTimeout(timeout0);
    clearTimeout(timeout1);
    clearTimeout(timeout2);
    clearTimeout(timeout3);

}
</script>



	<link type="text/css" rel="stylesheet" href="__DIR__{$dir}/css/guanzhu.css?ver=3" />
	<link rel="stylesheet" type="text/css" href="__DIR__{$dir}/css/buttons.css" />

	<style type="text/css">
		@-webkit-keyframes zhuan
		{
			0%
			{
				-webkit-transform:rotate(0deg);
			}

			100%
			{
				-webkit-transform:rotate(360deg);
			}
		}


		@-webkit-keyframes aa_out_bounce_left
		{
		    0%{
		        -webkit-transform:translateX(0)
		    }
		    20%{
		        -webkit-transform:translateX(20px)
		    }
		    100%{
		        -webkit-transform:translateX(-125px)
		    }
		}
		@-webkit-keyframes aa_in_bounce_center
		{
		    0%{
		        opacity:0;
		        -webkit-transform:scale(.3)
		    }
		    50%{
		        opacity:1;
		        -webkit-transform:scale(1.05)
		    }
		    70%{
		        -webkit-transform:scale(.9)
		    }
		    100%{
		        -webkit-transform:scale(1)
		    }
		}
		@-webkit-keyframes jinbi
		{
			from {-webkit-transform: rotateY(0deg);}
			to   {-webkit-transform: rotateY(180deg);}
		}
		.jubao-item
		{
			position: relative;
			float: left;
			width: 360px;
			height: 55px;
			top: 0px;
			font-size: 20px;
			line-height: 55px;
			margin-left: 20px;
			border-bottom: 1px solid #EBEBEB;
		}
		.jubao-radio
		{
			position: absolute;
			right: 10px;
			width: 25px;
			height: 25px;
			top: 20px;
		}

		.jubao-detail
		{
			position: relative;
			float: left;
			width: 360px;
			margin-left: 20px;
		}
		.jubao-detail textarea
		{
			width: 360px;
		    height: 80px;
		    font-size: 20px;
		    resize: none;
		    line-height: 40px;
		    border: none;
		    background-color: #eee;
		    border-radius: 10px;
		    padding-left: 10px;
		}
		@-webkit-keyframes guangzhu_ani
		{
			from  {-webkit-transform: scale(1);}
			to    {-webkit-transform: scale(1.05);}
		}
		@-webkit-keyframes che_ani
		{
		    0%    {-webkit-transform: translate(-20px,0px);opacity: 1}
		    8%  {-webkit-transform: translate(100px,0px) scale(0.95,1.05);opacity: 1}
		    10%  {-webkit-transform: translate(100px,0px) scale(1,1);opacity: 1}
		    12%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    14%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    16%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    18%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    20%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    45%   {-webkit-transform: translate(100px,0px) scale(0.97,1.03); opacity: 1}
		    50%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    60%   {-webkit-transform: translate(200px,0px); opacity: 0}
		    100%  {-webkit-transform: translate(200px,0px); opacity: 0}
		}
		@-webkit-keyframes che1_ani
		{
		    0%    {opacity: 1}
		    12%   {opacity: 1}
		    14%   {opacity: 0.5}
		    16%   {opacity: 1}
		    18%   {opacity: 0.5}
		    20%   {opacity: 1}
		    100%  {opacity: 1}

		}
		@-webkit-keyframes baoming
		{
		    0%  {opacity: 0}
		    58% {opacity: 0;-webkit-transform: scale(1.4);}
		    59% {opacity: 1;-webkit-transform: scale(1.4);}
		    70% {opacity: 1;-webkit-transform: scale(0.95);}
		    72% {opacity: 1;-webkit-transform: scale(1);}
		    80% {opacity: 0.8;-webkit-transform: scale(1.1);}
		    88% {opacity: 1;-webkit-transform: scale(1);}
		    93% {opacity: 0;-webkit-transform: scale(1.3);}
		    100%{opacity: 0}
		}
		@-webkit-keyframes shijia
		{
		    0%  {-webkit-transform: rotate(20deg) scale(0.8);opacity: 0}
		    10% {-webkit-transform: rotate(20deg) scale(0.75);opacity: 1}
		    20% {-webkit-transform: rotate(20deg) scale(0.85);}
		    28% {-webkit-transform: rotate(20deg) scale(0.75);}
		    38% {-webkit-transform: rotate(20deg) scale(0.85);}
		    47% {-webkit-transform: rotate(20deg) scale(0.75);opacity: 1}
		    55% {-webkit-transform: rotate(20deg) scale(0.90);opacity: 0}
		    100%{opacity: 0}

		}
		@-webkit-keyframes biaozhi_ani
		{
		    0%  {opacity: 0}
		    10% {opacity: 0}
		    20% {opacity: 1}
		    45% {opacity: 1}
		    55% {opacity: 0}
		    100%{opacity: 0}
		}
		#musicinfo
		{
			color: #fff;
			text-shadow: 1px 1px 2px #000;
			font-size: 15px;
			position: fixed;
			left: 432px;
		    top: 82px;
		    width: 60px;
		    height: 20px;
		    z-index: 100;
		    display: none;
		    opacity: 1;
		}
		@-webkit-keyframes heart_beating
		{
			from {opacity: 1;-webkit-transform: scale(1);}
			to   {opacity: 0.8;-webkit-transform: scale(0.8);}
		}
		@-webkit-keyframes heart1_moving
		{
			from  {opacity: 1;-webkit-transform: translate(0px,0px) scale(1);}
			to    {opacity: 0;-webkit-transform: translate(-20px,-50px) scale(1.5);}
		}
		@-webkit-keyframes heart2_moving
		{
			from  {opacity: 1;-webkit-transform: translate(0px,0px) scale(1);}
			to    {opacity: 0;-webkit-transform: translate(20px,-60px) scale(2);}
		}
		@-webkit-keyframes heart3_moving
		{
			from  {opacity: 1;-webkit-transform: translate(0px,0px) scale(1);}
			to    {opacity: 0;-webkit-transform: translate(70px,-40px) scale(2);}
		}
#enddiv
{
    position: absolute;
    width: 500px;
    height: 815px;
    background-color: rgba(0,0,0,0.7);
    z-index: 10000;
    display: none;
    opacity: 0;
}
#title_div
{
    width: 320px;
    height: 200px;
    left: 90px;
    top: 250px;
    color: #fff;
    font-size: 25px;
    position: relative;
    line-height: 45px;
    text-align: center;
    font-family: '微软雅黑';
    display:table;
}
#title_line
{
    position: absolute;
    width: 370px;
    height: 2px;
    background-color: #fff;
    top: 415px;
    left: 65px;
}
#reshowbtn
{
    position: absolute;
    width: 150px;
    height: 44px;
    border-radius: 10px;
    background-color: rgba(94,159,177,0.9);
    color: #fff;
    font-size: 22px;
    text-align: center;
    line-height: 44px;
    top: 446px;
    left: 74px;
}
#guanzhubtn
{
    position: absolute;
    width: 150px;
    height: 44px;
    border-radius: 10px;
    background-color: rgba(185,91,83,0.9);
    color: #fff;
    font-size: 22px;
    text-align: center;
    line-height: 44px;
    top: 446px;
    left: 268px;
}
@-webkit-keyframes fadein
{
	from  {opacity: 0}
	to    {opacity: 1}
}
	</style>

	
